<template>
  <div id="container">
    <div id="_top">查询</div>
    <div id="_bottom">
      <span>搜索</span>
      <el-input
        type="input"
        placeholder="请输入内容"
        v-model="input"
        size="small"
        style="width: 20rem; margin-right: 3rem"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="editPack"
        >搜索</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  methods: {
    // 搜索套餐
    async editPack() {
      // console.log(this.input);
      const { data: res } = await this.axios.post("/pack/listname", {
        name: this.input,
      });

      this.$emit("searchData", res);
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  font-size: 2rem;
  border: 2px solid lightgray;
  margin: 0 auto;
  box-sizing: border-box;
}

#_top {
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: lightgray;
  // border: 1px solid black;
  padding: 1.5rem;
}

#_bottom {
  background-color: #fff;
  font-size: 1.5rem;
  line-height: 5rem;
  padding: 2.5rem;
  height: 5rem;
  & > span {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
</style>